<template lang="html">
  <div class="machine">
    <div class="content">
      <div class="data">
        <el-table
          :data="machineData" class="table">
          <el-table-column label="" width="20"></el-table-column>
          <el-table-column
            prop="dataType"
            label="类型">
            <template slot-scope="scope">
              <span class="text-block" v-if="scope.row.dataType == 0">消费</span>
              <span class="text-green" v-else-if="scope.row.dataType == 1">购买</span>
              <span class="text-green" v-else-if="scope.row.dataType == 2">返还</span>
              <span class="text-red" v-else-if="scope.row.dataType == 3">退款</span>
              <span class="text-green" v-else-if="scope.row.dataType == 4">注册赠送</span>
              <span class="text-green" v-else-if="scope.row.dataType == 5">赠送</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="quantity">
            <template slot="header" slot-scope="scope">
              <span class="text-green">收</span>/
              <span class="text-red" :title="scope.row">支</span>
            </template>
            <template slot-scope="scope">
              <span class="text-red" v-if="scope.row.dataType == 0 || scope.row.dataType == 3">{{scope.row.quantity}}</span>
              <span v-else class="text-green">{{scope.row.quantity}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="surplus"
            label="本次结余">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
            <template slot-scope="scope">
              <span class="text-grey" v-if="scope.row.status == 0">禁用</span>
              <span class="text-grey" v-else-if="scope.row.status == 1">正常</span>
              <span class="text-grey" v-else-if="scope.row.status == 2">删除</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createDate"
            label="日期">
          </el-table-column>
          <el-table-column
            prop="instruction"
            label="说明"
            width="220">
            <template slot-scope="scope">
              <span class="text-grey text-explain" :title="scope.row.explain">{{scope.row.explain}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="operation"
            width="100"
            label="操作">
            <template slot-scope="scope">
              <span class="text-detail" @click="listDetail(scope.row)" v-if="scope.row.dataType == 0">查看详情</span>
              <span class="text-grey" v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="trips">
        <span>*</span>
        已扣除运行中任务算力
      </div>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :total="pageCount"
          :page-size="pageNumber"
          @current-change="currentChange">
        </el-pagination>
      </div>
      <el-dialog title="任务信息" :visible.sync="dialogTableVisible">
        <h2 class="item-title">任务名称: {{taskName}}</h2>
        <h2 class="item-title">集群名称: {{clusterName}}</h2>
        <el-table :data="gridData">
          <el-table-column property="taskId" label="容器ID"></el-table-column>
          <el-table-column property="gpuType" label="GPU类型"></el-table-column>
          <el-table-column property="gpuNum" label="GPU个数"></el-table-column>
          <el-table-column property="memoryNum" label="内存"></el-table-column>
          <el-table-column property="cpuNum" label="CPU"></el-table-column>
          <el-table-column property="runHours" label="运行时长"></el-table-column>
          <el-table-column property="calculationPower" label="算力"></el-table-column>
          <el-table-column property="startTime" label="开始时间"></el-table-column>
          <el-table-column property="endTime" label="结束时间"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getUserCalculationPowerDetails, getTasks } from '@/api/order'
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      pageNo: 1,
      // 当前页数
      pageSize: 1,
      // 总页数
      pageNumber: 20,
      // 默认一页显示20条数据
      pageCount: 1,
      // 数据总条数
      machineData: [],
      // 列表数据
      gridData: [],
      // 单条数据详情
      dialogTableVisible: false,
      // 数据详情显示状态
      taskName: '',
      // 详情任务名称
      clusterName: ''
      // 详情集群名称
    }
  },
  methods: {
    // 跳转到X页面
    currentChange (val) {
      this._getUserCalculationPowerDetails(val)
    },
    // 任务详情
    listDetail (item) {
      this._getTasks(item.userId, item.instruction, item.clusterName)
    },
    // 获取算力列表
    _getUserCalculationPowerDetails (number) {
      const query = `?pageNo=${number}&pageSize=${this.pageNumber}&token=${this.userInfo.bitaToken}`
      getUserCalculationPowerDetails(query).then(res => {
        if (res.code === 0) {
          this.pageCount = res.count
          this.machineData.length = 0
          res.result && res.result.forEach((item) => {
            let explain = ''
            switch (item.dataType) {
              case 0:
                explain = `任务名称：${item.instruction}`
                break
              case 1:
                explain = `订单号: ${item.instruction}`
                break
              case 2:
                explain = `任务名称: ${item.instruction};返还理由: ${item.repayReason}`
                break
              case 3:
                explain = `订单号: ${item.instruction}`
                break
              default:
                explain = '-'
                break
            }
            this.machineData.push({
              'dataType': item.dataType,
              'quantity': item.quantity,
              'surplus': item.surplus,
              'status': item.status,
              'createDate': item.createDate.substr(0, 16),
              'instruction': item.instruction,
              'repayReason': item.repayReason,
              'userId': item.userId,
              'clusterName': item.clusterName,
              'explain': explain
            })
          })
        } else if (res.code === 60001) {
          this.$router.push({
            path: '/login'
          })
          this.$message({ message: res.msg, showClose: true, type: 'error' })
        } else {
          this.$message({ message: res.msg, showClose: true, type: 'error' })
        }
      })
    },
    // 算力详情
    _getTasks (userId, jobId, clusterName) {
      const query = `?userId=${userId}&jobId=${jobId}&clusterName=${clusterName}&token=${this.userInfo.bitaToken}`
      getTasks(query).then(res => {
        this.dialogTableVisible = true
        if (res.code === 0) {
          this.taskName = jobId
          this.clusterName = clusterName
          this.gridData = [...res.result]
          this.gridData && this.gridData.forEach((item, index) => {
            let timer = item.runHours
            let timerms = (timer - parseInt(timer)) * 60
            let timerh = parseInt(timer) > 0 ? parseInt(timer) + 'h ' : ''
            let timerm = parseInt(timerms) > 0 ? parseInt(timerms) + 'm ' : ''
            let timers = parseInt((timerms - parseInt(timerms)) * 60) + 's'
            this.gridData[index].runHours = timerh + timerm + timers
          })
        } else {
          this.$message({ message: res.msg, showClose: true, type: 'error' })
        }
      })
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted () {
    this._getUserCalculationPowerDetails(1)
  }
}
</script>

<style lang="stylus" scoped>
  .machine
    width 100%
    .content
      width 1162px
      margin 0 auto
      padding 20px 0
      .data
        width 100%
        min-height 500px
        background #ffffff
        .table
          width 100%
          >>> .text-green
            color #00a65a!important
          >>> .text-red
            color #dd4b39!important
          >>> .text-block
            color #333333!important
          >>> .text-grey
            color #666666!important
          >>> .text-detail
            cursor pointer
            color #337ab7
          >>> .text-explain
            display block
            width 100%
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
      .trips
        line-height 36px
        font-size 12px
        color #333
        span
          color #ff0000
      .pagination
        width 100%
        padding 10px 0
        background #ffffff
        text-align right
      .item-title
        color #333
        padding-bottom 14px
        font-size 20px
</style>
